<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="设备管理" />

    <div class="cus-center">
      <!-- search -->
      <div class="search">
        <div class="search-item">
          <el-select v-model="value" placeholder="选择班级" @change="change_select">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            />
          </el-select>
          <el-button type="success" @click="open_model">批量绑定</el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        :header-cell-style="{background:'#f0f2f5',color:'black'}"
        class="table"
        :data="table_list"
        style="width: 100%"
        fit
        highlight-current-row
        min-height="650"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          fixed
          prop="student_id"
          label="ID"
        />
        <el-table-column
          align="center"
          prop="student_number"
          label="学生编号"
        />
        <el-table-column
          prop="student_name"
          label="学生姓名"
        />
        <el-table-column
          prop="devicegroups_name"
          label="设备编组"
        />
        <el-table-column
          prop="devicegroups_number"
          label="设备编号"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="mac"
          label="mac地址"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">

            <div class="table-btn">
              <div
                class="btn-item"
                @click="open_model2(scope.row)"
              >绑定</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagin"
        background
        :current-page="currentPage"
        :page-size="this.size"
        :total="this.total"
        @current-change="handleCurrentChange"
      />

    </div>

    <!-- dialog1 -->
    <plain-dialog
      width="500px"
      title="请选择需要绑定的班级和设备组"
      :common_dialog="this.common_dialog"
      @hand_click_false="common_dialog_false"
      @hand_click_true="common_dialog_true"
      @hand_close="hand_close_common"
    >
      <div class="plain">
        <span>班级:</span>
        <el-select v-model="ClassID" placeholder="选择班级">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="plain">
        <span>设备组:</span>
        <el-select v-model="GroupID" placeholder="请选择">
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
    </plain-dialog>
    <!-- dialog2 -->
    <plain-dialog
      width="500px"
      title="请选择需要绑定的班级和设备组"
      :common_dialog="this.common_dialog2"
      @hand_click_false="common_dialog_false2"
      @hand_click_true="common_dialog_true2"
      @hand_close="hand_close_common2"
    >
      <div class="plain">
        <span>学生姓名:</span>
        <span class="name">{{ this.student_name }}</span>
      </div>
      <div class="plain">
        <span>设备Mac编号:</span>
        <el-input v-model="Mac" class="input" placeholder="单行输入" />
      </div>
    </plain-dialog>
  </div>
</template>

<script>
import Index from '@/api/index.js'
import NewHeader from '@/components/NewHeader.vue'
import PlainDialog from '@/components/Dialog/PlainDialog.vue'
export default {
  name: 'HistoryList',
  components: {
    PlainDialog,
    NewHeader
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      value: '',
      table_list: [
        {
          name: '张一鸣',
          sex: '男',
          number: '123456',
          time: '2020-0608--52',
          work: '协和医院',
          belong: 'xie协和医院组'
        }
      ],
      currentPage: 1,
      size: 5,
      total: 100,
      common_dialog2: false,
      common_dialog: false,
      student_name: '',
      groupList: [],
      GroupID: '',
      StudentID: '',
      Mac: '',
      ClassID: '',
      ClassID2: 0
    }
  },
  mounted() {
    this.Device()
    this.GetBatchBind()
  },
  methods: {
    change_select(e) {
      console.log(e)
      // this.ClassID = e
      this.ClassID2 = e
      this.Device()
    },
    open_model() { // 打开遮罩
      this.common_dialog = true
    },
    hand_close_common(val) { // dialog遮罩取消
      this.common_dialog = val
    },
    common_dialog_false(val) { // dialog点击取消
      this.common_dialog = val
      alert('你点击了取消')
    },
    common_dialog_true(val) { // dialog点击确定
      this.common_dialog = val
      // alert('你点击了确定')
      this.BatchBing()
    },
    async BatchBing() {
      const data = {
        ClassID: this.ClassID,
        GroupID: this.GroupID
      }
      const result = await Index.BatchBing(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.$message({
          message: result.message,
          type: 'success',
          duration: 2 * 1000
        })
      }
    },
    open_model2(item) {
      console.log(item)
      this.student_name = item.student_name
      this.StudentID = item.student_id
      this.common_dialog2 = true
    },
    hand_close_common2(val) { // dialog遮罩取消
      this.common_dialog2 = val
    },
    common_dialog_false2(val) { // dialog点击取消
      this.common_dialog2 = val
      alert('你点击了取消')
    },
    common_dialog_true2(val) { // dialog点击确定
      if (this.Mac === '') {
        this.$message({
          message: '请输入学生Mac编号',
          type: 'error',
          duration: 2 * 1000
        })
        return false
      }
      this.common_dialog2 = val
      // alert('你点击了确定')
      this.PersonalBind()
    },
    async PersonalBind() {
      const data = {
        StudentID: this.StudentID,
        Mac: this.Mac
      }
      const result = await Index.PersonalBind(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.$message({
          message: result.message,
          type: 'success',
          duration: 2 * 1000
        })
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      // alert(`你选择了${val}`)
    },
    async Device() {
      const data = {
        ClassID: this.ClassID2,
        page: this.currentPage,
        size: this.size
      }
      const result = await Index.Device(data) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        // this.options = result.result.classList
        this.value = result.result.classID
        this.table_list = result.result.list
        this.currentPage = result.result.page
        this.total = result.result.total
      }
    },
    async GetBatchBind() {
      const result = await Index.GetBatchBind() // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.groupList = result.result.groupList
        this.options = result.result.classList
      }
    },

    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.Device()
    },
    go_info(info) {
      console.log(info)
      this.$router.push({ path: `/history/history-detail/${info.number}` })
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .dialog-footer{
  text-align: center;
}
.plain{
  display: flex;
  justify-content: flex-start;
  width: 350px;
  margin: 20px auto;
  line-height: 40px;
  span{
    width: 90px;
    text-align: right;
    margin-right: 10px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    &.name{
      text-align: left;
    }
  }
  .input{
    width: 200px;
  }
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }
  }

}
.CustomerList{
  position: relative;
  padding: 25px;
  .cus-center{
    background-color: white;
    padding: 25px;
    .search{
      overflow: hidden;
      ::v-deep .el-input{
        width: 250px;
        margin: 0 10px;
      }
      .search-item{
        width: 100%;
        float: left;
        display: flex;
        justify-content: space-between;
        p{
          font-size: 12px;
        }
      }
    }
    .table{
      margin-top: 30px;
      .table-btn{
        width: fit-content;
        // margin: 0 auto;
        display: flex;
        .btn-item{
          cursor: pointer;
          color: #46a6ff;
          font-size: 14px;
          // padding: 0 10px;
        }
      }
    }
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #42b983;
    border-color: #42b983;
}
::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
  border-color: #42b983;
  outline-color:#42b983;
}
.name_word{
  color: #46a6ff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #41cb89;   // 进行修改背景和字体
  color: #fff;
}
.pagin{
  margin-top: 25px;
  text-align: right;
}
</style>
